<template>
    <div>
        <div>
            <div class="search">
                <div class="search-up">
                    <el-button @click="addDialog=true" style="border: 1px solid #0846B9;color:#0846B9">+新增</el-button>
                </div>
                <div class="search-down">
                    <span>子公司名称:</span>
                    <el-input class="search-input" v-model="searchKeyword" clearable size="mini"></el-input>
                    <div class="search-down-btn">
                        <el-button size="small" @click="search" style="color:white;background-color: #0846B9">搜索</el-button>
                        <el-button size="small" @click="resetsearch" style="border: 1px solid #0846B9;color:#0846B9">重置</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="wrapper">
            <!-- 表格 -->
            <el-table :data="cOrganizationList.slice((pageIndex-1)*pageSize,pageIndex*pageSize)" 
            style="width: 100%" v-loading="loading">
                <el-table-column type="index" label="序号" width="65" align="center"></el-table-column>
                <el-table-column prop="organization_name" label="集团名称" width="180" align="center"></el-table-column>
                <el-table-column prop="organization_phone" label="联系电话" align="center"></el-table-column>
                <el-table-column label="操作" width="80" align="center">
                    <template slot-scope="scope">
                        <!-- 删除本行数据 -->
                        <el-button type="text" @click="deleteDialog(scope.row.org_rela_id)">移除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="page">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="Info.pageIndex"
                    :page-sizes="[1, 2, 5, 10]"
                    :page-size="Info.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalRecords">
                </el-pagination>
            </div>
        </div>

        <!-- 新增的对话框 -->
        <el-dialog
            title="新增集团关系"
            :visible.sync="addDialog"
            width="50%"
            append-to-body>
            <el-form :model="addRelationForm" :rules="RelationFormRules"
                ref="addRelationFormRef" label-width="150px">
                <el-form-item label="集团名称：">{{f_organization_pname}}</el-form-item>
                <el-form-item label="子公司：" prop="organization_id">
                    <el-select v-model="addRelationForm.organization_id" placeholder="请选择">
                        <el-option v-for="(item,index) in cOrganization" :key="index"
                        :label="item.organization_name" :value="item.organization_id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!-- 确认取消事件 -->
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addcRelation">提交</el-button>
                <el-button @click="addDialog = false">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { request } from '../../../../api/axios'

export default {
    name:"RelationDialog",
    props:{
        f_organization_pid:String,
        f_organization_pname:String
    },
    data(){
        return{
            Info:{
                ilist: [
                    {
                    title: "organization_pid",
                    content: this.f_organization_pid
                    }
                ]
            },
            // 分页
            pageIndex: 1,   //第几页
            pageSize: 10,   //一页几条
            cOrganizationList:[],
            totalRecords:0,
            locallist:"",   //搜索事件时数据暂存至locallist中
            loading:true,

            // 搜索框输入的关键词
            searchKeyword:"",
            // 搜索结果
            searchResult:[],
            searchResultRecords:0,

            // 新增对话框的显示与隐藏
            addDialog:false,
            // 新增的参数
            addRelationForm:{
                organization_pid:"",
                organization_id:""
            },
                // 获取来的子集团
                cOrganization:[],


            // 删除数据的参数
            deleteRelation:{
                org_rela_id:""
            },

            // 表单验证规则
            // 新增表单的规则
            RelationFormRules:{
                organization_id:[{required:true,message:"请选择子公司",trigger:"blur"},]
            }
        }
    },
    created(){
        this.getcOrganizationList()
        this.getcOrganization()
    },
    methods:{
        // 请求来子集团信息
        getcOrganizationList(){
            request("post","/Organization_Relation/GetEntInfo",this.Info)
            .then(res =>{
                console.log(res)
                this.cOrganizationList=res.resultList
                this.locallist=this.cOrganizationList
                this.loading=false
            })
        },

        // 搜索事件
        search(){
            this.cOrganizationList=this.locallist
            this.searchResult=[]
            console.log(this.searchKeyword)
            for(let i=0;i<this.cOrganizationList.length;i++){
                if(this.cOrganizationList[i].organization_name.indexOf(this.searchKeyword) >-1){
                    this.searchResult.push(this.cOrganizationList[i])
                    this.searchResultRecords+=1
                }
            }
            this.cOrganizationList=this.searchResult
            this.totalRecords=this.searchResultRecords
        },
        // 重置搜索框
        resetsearch(){
            this.searchKeyword=""
            this.getcOrganizationList()
        },

        // 新增事件
        addcRelation(){
            this.$refs.addRelationFormRef.validate(valid =>{
                if(!valid) return
                this.addRelationForm.organization_pid=this.f_organization_pid
                console.log(this.addRelationForm.organization_pid)
                request("post","/Organization_Relation/InsertStatus",this.addRelationForm)
                .then(res =>{
                    console.log(res)
                    this.addDialog=false
                    // this.cOrganizationList=[]
                    this.getcOrganizationList()
                    // 提示
                    if(res.result==1){
                        this.$message({
                            type: 'success',
                            message: res.resultDesc,
                        });
                    }
                    else{
                        this.$message({
                            type: 'warning',
                            message: res.resultDesc,
                        });
                    }
                })
            })
        },
            // 请求来子集团信息
            getcOrganization(){
                request("post","/Organization_Info/GetEntInfo",this.Info)
                .then(res =>{
                    console.log(res)
                    this.cOrganization=res.resultList
                })
            },

        // 移除事件
        deleteDialog(id){
            this.$confirm('您确定要删除该数据吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRelation.org_rela_id=id
                // 点击确定执行删除事件并提示
                request("post","/Organization_Relation/DeleteStatus",this.deleteRelation)
                    .then(res=>{
                        this.getcOrganizationList()
                        // 提示
                        if(res.result==1){
                            this.$message({
                                type: 'success',
                                message: res.resultDesc,
                            });
                        }
                        else{
                            this.$message({
                                type: 'warning',
                                message: res.resultDesc,
                            });
                        }
                    })
            })
        },

        // 分页的设置
        // 一页几条
        handleSizeChange(newSize){
            console.log(newSize)
            this.pageSize=newSize
        },
        // 点击设置第几页
        handleCurrentChange(newPage){
            console.log(newPage)
            this.pageIndex=newPage
        }
    }
}
</script>

<style scoped>
/* 搜索布局开始 */
.search{
    width: 100%;
}
.search .el-button{
    color: #0846B9;
}
.search .search-up{
    text-align: right;
}
.search-down{
    background-color: white;
    margin-top: 10px;
    padding: 0px 130px;
    text-align: left;
}
.search-input{
    width: 400px;
}
.search-down-btn{
    margin: 20px 0px 0px 400px;
    width: 130px;
}

.wrapper{
    padding: 40px 30px 20px;
}

/* 对话框 */
.el-form{
    padding-right:30px;
}
.el-form .el-form-item .el-input,.el-select{
    width: 100%;
}

/* 分页 */
.el-pagination{
    padding-top: 20px;
    text-align: center;
}

/* 表格操作列的链接的下划线设置 */
.el-table .el-button{
    /* text-decoration: underline; */
    color: #606266;
    padding-bottom: 1px;
    border-bottom: 1px solid;
    border-radius: 0px;
}
</style>